<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@taglib prefix="s" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport"
	content="width=device-width, initial-scale=1, maximum-scale=1">
<title>N6_1F储位管理</title>
<%@include file="/WEB-INF/common/css.jsp"%>
<style>
	.xtcardshow{
		width: 80%;
		height: 40px;
		color: #fff;
		text-align: center;
		line-height: 40px;
		border-radius: 50px;
	}
</style>
<%@include file="/WEB-INF/common/topjs.jsp"%>
</head>
<body class="layui-layout-body">
	<div class="layui-layout layui-layout-admin">

		<%@include file="/WEB-INF/common/jsp/header.jsp"%>

		<!-- 内容主体区域 -->
		<div class="layui-container" style="padding: 15px;">
			<div class="layui-row">
				<div class="layui-col-md4" style="padding: 5px">
					<div class="layui-card">
						<div class="layui-card-header layui-bg-green">用户信息</div>
						<div class="layui-card-body">
							<p>工号: ${sessionScope.user.no }</p>
							<p>用户名: ${sessionScope.user.username }</p>
						</div>
					</div>
					<div class="layui-card" style="display:none">
						<div class="layui-card-header layui-bg-green">操作</div>
						<div class="layui-card-body">
							<p>
								<button class="layui-btn layui-btn-radius">更改信息</button>
								<button class="layui-btn layui-btn-radius layui-btn-normal">更改密码</button>
							</p>
						</div>
					</div>
					<div class="layui-card">
						<div class="layui-card-header" style="background: #5FB878; color:#fff">我的选择</div>
						<div class="layui-card-body">
							<ul class="layui-timeline">
							  <li class="layui-timeline-item">
							    <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
							    <div class="layui-timeline-content layui-text">
							      <h3 class="layui-timeline-title">机种</h3>
							      <p class="xtcardshow" style="background: #224656;display: none" id="leftMachine">
							         
							      </p>
							    </div>
							  </li>
							  <li class="layui-timeline-item">
							    <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
							    <div class="layui-timeline-content layui-text">
							      <h3 class="layui-timeline-title">类型</h3>
							      <p class="xtcardshow" style="background: #901919;display: none" id="leftItem">
							         
							      </p>
							    </div>
							  </li>
							  <li class="layui-timeline-item">
							    <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
							    <div class="layui-timeline-content layui-text">
							      <h3 class="layui-timeline-title">状态</h3>
							      <p class="xtcardshow" style="background: #4f7d92;display: none"  id="leftGjehState">
							         
							      </p>
							    </div>
							  </li>
							  <li class="layui-timeline-item">
							    <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
							    <div class="layui-timeline-content layui-text">
							      <h3 class="layui-timeline-title">暂放状态</h3>
							      <p class="xtcardshow" style="background: #3b751d;display: none"  id="leftTempputState">
							         
							      </p>
							    </div>
							  </li>
							  <li class="layui-timeline-item">
							    <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
							    <div class="layui-timeline-content layui-text">
							      <h3 class="layui-timeline-title">当前数据</h3>
							      <p class="xtcardshow" style="background: #542e88;display: none"  id="leftNum">
							         
							      </p>
							    </div>
							  </li>
							</ul>
						</div>
					</div>
				</div>
				<div class="layui-col-md8"  style="padding: 5px">
					<div class="layui-card">
						<div class="layui-card-header layui-bg-cyan">In 登记  (In 登记填写的数据将加到原数据上)</div>
						<div class="layui-card-body">
							<form class="layui-form" action=""  lay-filter="form">
								<input type="hidden" name="id" />
								<div class="layui-form-item">
									<label class="layui-form-label">机种</label>
									<div class="layui-input-block">
										<select name="dataMachineId" id="machine" lay-verify="required" lay-filter="machine">
									        
									    </select>
									</div>
								</div>
								<div class="layui-form-item">
									<label class="layui-form-label">项目</label>
									<div class="layui-input-block">
										<select name="dataItemId" id="item" lay-verify="required" lay-filter="item">
									        
									    </select>
									</div>
								</div>
								<div class="layui-form-item">
									<label class="layui-form-label">状态</label>
									<div class="layui-input-block">
										<select name="dataGJEHStateId" id="gjehState" lay-verify="required" lay-filter="gjehState">
									        
									    </select>
									</div>
								</div>
								<div class="layui-form-item">
									<label class="layui-form-label">暂放状态</label>
									<div class="layui-input-block">
										<select name="dataTempputStateId" id="tempputState" lay-verify="required" lay-filter="tempputState">
									        
									    </select>
									</div>
								</div>
								<div class="layui-form-item">
									<label class="layui-form-label">数量</label>
									<div class="layui-input-block">
										<input type="number" name="num" required lay-verify="required"
											placeholder="请输入num" autocomplete="off" class="layui-input" value="0">
									</div>
								</div>
								<div class="layui-form-item">
									<div class="layui-input-block">
										<button class="layui-btn" lay-submit lay-filter="in">提交</button>
										<button type="reset" class="layui-btn layui-btn-primary">重置</button>
									</div>
								</div>
							</form>
						</div>
					</div>
				</div>
			</div>
		</div>

		<%@include file="/WEB-INF/common/jsp/footer.jsp"%>

	</div>
	<%@include file="/WEB-INF/common/bottomjs.jsp"%>
	<script>
$(function(){
	var form = layui.form;
	  //监听提交
	  form.on('submit(in)', function(data){
		$.ajax({
	      	url:"${base}/api/dataSummary/in.api",
	      	type: "post",
	      	headers: Apicheck.getHeaders(),
	      	data: data.field,
	      	success: function(result){
	      		if(result.code == 1001){
	      			layer.msg(result.msg, {icon:6});
	      			find($("#machine").val(), $("#item").val(), $("#gjehState").val(), $("#tempputState").val())
	      		}else{
	      			layer.msg(result.msg, {icon:5,anim:6});
	      		}
	      	}
	    });
	    return false;
	  });
	  
	  initForm();
})

function initForm(){
	findMachines();
}
function findMachines(){
	$.ajax({
		url:"${base}/api/dataSummary/findMachines.api",
    	type: "post",
    	headers: Apicheck.getHeaders(),
    	data: {},
    	success: function(result){
    		$("#machine").html("");
    		$("#machine").append("<option value=''></option>");
    		var list = result.data;
    		for(var i = 0; i < list.length; i ++){
    			$("#machine").append("<option value='"+list[i].id+"'>"+list[i].name+"</option>");
    		}
    		layui.form.render("select", "form");
    		layui.form.on("select(machine)", function(data){
    			$("#leftMachine").html($("#machine option:selected").text());
    			$("#leftItem").fadeOut("slow");
    			$("#leftGjehState").fadeOut("slow");
    			$("#leftTempputState").fadeOut("slow");
    			$("#leftNum").fadeOut("slow");
    			if(data.value == ""){
    				$("#leftMachine").fadeOut("slow");
    			}else{
    				$("#leftMachine").fadeIn("slow");
    			}
    			findItems(data.value);
    		});
    	}
	});
}
function findItems(machineId){
	$.ajax({
		url:"${base}/api/dataSummary/findItems.api",
    	type: "post",
    	headers: Apicheck.getHeaders(),
    	data: {machineId: machineId},
    	success: function(result){
    		$("#item").html("");
    		$("#item").append("<option value=''></option>");
    		var list = result.data;
    		for(var i = 0; i < list.length; i ++){
    			$("#item").append("<option value='"+list[i].id+"'>"+list[i].name+"</option>");
    		}
    		layui.form.render("select", "form");
    		layui.form.on("select(item)", function(data){
    			$("#leftItem").html($("#item option:selected").text());
    			$("#leftGjehState").fadeOut("slow");
    			$("#leftTempputState").fadeOut("slow");
    			$("#leftNum").fadeOut("slow");
    			if(data.value == ""){
    				$("#leftItem").fadeOut("slow");
    			}else{
    				$("#leftItem").fadeIn("slow");
    			}
    			findGjehStates($("#machine").val(), data.value);
    		});
    	}
	});
}
function findGjehStates(machineId, itemId){
	$.ajax({
		url:"${base}/api/dataSummary/findGjehStates.api",
    	type: "post",
    	headers: Apicheck.getHeaders(),
    	data: {machineId: machineId,itemId: itemId},
    	success: function(result){
    		$("#gjehState").html("");
    		$("#gjehState").append("<option value=''></option>");
    		var list = result.data;
    		for(var i = 0; i < list.length; i ++){
    			$("#gjehState").append("<option value='"+list[i].id+"'>"+list[i].name+"</option>");
    		}
    		layui.form.render("select", "form");
    		layui.form.on("select(gjehState)", function(data){
    			$("#leftGjehState").html($("#gjehState option:selected").text());
    			$("#leftTempputState").fadeOut("slow");
    			$("#leftNum").fadeOut("slow");
    			if(data.value == ""){
    				$("#leftGjehState").fadeOut("slow");
    			}else{
    				$("#leftGjehState").fadeIn("slow");
    			}
    			findTempputStates($("#machine").val(), $("#item").val(), data.value);
    		});
    	}
	});
}
function findTempputStates(machineId, itemId, gjehStateId){
	$.ajax({
		url:"${base}/api/dataSummary/findTempputStates.api",
    	type: "post",
    	headers: Apicheck.getHeaders(),
    	data: {machineId: machineId,itemId: itemId, gjehStateId:gjehStateId},
    	success: function(result){
    		$("#tempputState").html("");
    		$("#tempputState").append("<option value=''></option>");
    		var list = result.data;
    		for(var i = 0; i < list.length; i ++){
    			$("#tempputState").append("<option value='"+list[i].id+"'>"+list[i].name+"</option>");
    		}
    		layui.form.render("select", "form");
    		layui.form.on("select(tempputState)", function(data){
    			$("#leftTempputState").html($("#tempputState option:selected").text());
    			$("#leftNum").fadeOut("slow");
    			if(data.value == ""){
    				$("#leftTempputState").fadeOut("slow");
    			}else{
    				$("#leftTempputState").fadeIn("slow");
    			}
    			find($("#machine").val(), $("#item").val(), $("#gjehState").val(), data.value)
    		});
    	}
	});
}

function find(machineId, itemId, gjehStateId, tempputeStateId){
	$.ajax({
		url:"${base}/api/dataSummary/find.api",
    	type: "post",
    	headers: Apicheck.getHeaders(),
    	data: {machineId: machineId,itemId: itemId, gjehStateId:gjehStateId, tempputStateId:tempputeStateId},
    	success: function(result){
  			$("#leftNum").html(result.data.num);
  			$("#leftNum").fadeIn("slow");
    	}
	});
}
</script>
</body>
</html>